<template>
  <div class="index-container">
    <version-information />
    <a-divider orientation="left">图表统计</a-divider>
    <a-row>
      <a-col :flex="2"><div id="chart_example"></div></a-col>
      <a-col :flex="3"><div id="comment"></div></a-col>
    </a-row>
  </div>
</template>

<script>
  import * as echarts from 'echarts'
  import VersionInformation from './components/VersionInformation'
  import * as moment from 'moment'
  // const echarts = require('echarts')
  export default {
    name: 'Index',
    components: { VersionInformation },
    data() {
      return {}
    },
    mounted() {
      // let this_ = this
      let myChart = echarts.init(document.getElementById('chart_example'))
      let myComment = echarts.init(document.getElementById('comment'))
      let commentoption = {
        title: {
          text: '近7日评论数',
          // subtext:'',
          x: 'center',
          y: '7px',
          textStyle: {
            color: '#3A7BD5',
            fontSize: 16,
          },
          textAlign: 'left',
        },
        xAxis: {
          type: 'category',
          data: this.getDate(6, 24 * 60 * 60 * 1000),
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            name: '评论数',
            data: [7, 5, 3, 3, 7, 6, 2],
            type: 'line',
          },
        ],
      }
      let option = {
        // title: 'sdsd',
        title: {
          text: '各块数量统计',
          // subtext:'',
          x: 'center',
          y: '7px',
          textStyle: {
            color: '#3A7BD5',
            fontSize: 16,
          },
          textAlign: 'left',
        },
        color: ['#3A7BD5'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
        },
        xAxis: [
          {
            type: 'category',
            data: ['百年历程', '红色基地', '名人烈士', '新闻游记', '论坛'],
            axisTick: {
              alignWithLabel: true,
            },
          },
        ],
        yAxis: [
          {
            type: 'value',
          },
        ],
        series: [
          {
            name: '数量',
            type: 'bar',
            barWidth: '60%',
            data: [37, 13, 15, 9, 15],
          },
        ],
      }
      myChart.setOption(option)
      console.log(commentoption)
      myComment.setOption(commentoption)

      //建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
      window.addEventListener('resize', function () {
        myChart.resize()
        myComment.resize()
      })
    },
    methods: {
      getDate(count, long) {
        let time = new Date().setMinutes(0)
        time = time - 24 * 60 * 60 * 1000 * 6
        let data = []
        for (let i = 0; i <= count; i++) {
          data.push(moment(time).format('YYYY-MM-DD'))
          time += long
        }
        console.log(data)
        return data
      },
    },
    watch: {},
    created() {},
  }
</script>

<style scoped>
  h2 {
    text-align: center;
    padding: 30px;
    font-size: 18px;
  }
  #chart_example {
    height: 300px;
    width: 100%;
    /* border: 1px solid rgb(95, 95, 95); */
    margin: 0 auto;
  }
  #comment {
    height: 300px;
    /* width: 100%; */
    /* border: 1px solid rgb(95, 95, 95); */
    margin: 0 auto;
  }
</style>
